<template>
  <div>
    <u-popup  :round="2" bgColor="transparent" :show="mashow" @close="maclose"  mode="center">
      <view class="mabox" v-if="userId">
        <view class="flexCenter">
          <up-avatar
          v-if="userinfo.avatarUrl"
          :src="`${baseimgURL}${userinfo.avatarUrl}`"
          size="122"
        ></up-avatar>
        <up-avatar
          v-else
          :src="`${state.baseimgurl}/nohead.png`"
          size="122"
        ></up-avatar>
          <view class="mL20">
            <view class="nametext">{{ userinfo.nickName}}</view>
            <view class="phonetext">{{userinfo.mobile}}</view>
          </view>
        </view>
        <!-- <image
          class="maimg"
          mode="widthFix"
          src="http://192.168.0.37:9000/zgyp/20231229/585a9ac20b14408b8183c8008097690e.jpg"
        ></image> -->
         <!-- 二维码插件 width height设置宽高 -->
         <!-- <canvas canvas-id="qrcode" style="width: 130px; height: 130px" /> -->
         <view class="fabox">
          <view class="erweimabox">
            <uv-qrcode ref="qrcode"  class="maimg" size="243rpx" :value="textvalue"></uv-qrcode>
           </view>
         </view>
 
        <view class="flex">
          <image
            class="shelogo"
            mode="widthFix"
            src="@/static/img/shelogo.png"
          ></image>
          <view class="tips">
            <view>1、奢收多，专业、可靠、高价</view>
            <view>2、会员码不要轻易向外泄露</view>
            <view>3、上门回收，需要向鉴定师出示会员码</view>
          </view>
        </view>
      </view>
      <view class="nomabox" v-else>
        <image
          class="rentiplogo"
          mode="widthFix"
          src="@/static/img/rentiplogo.png"
        ></image>
        <view class="tips"> " 需要你的认证 </view>
        <view class="tips"> 才能体验这个功能哦 " </view>
        <button class="goren" @click="gorenpage">去认证</button>
      </view>
    </u-popup>
  </div>
</template>
<script lang="ts" setup>
    import { baseimgURL } from '@/config'
    import { ref,reactive,inject } from "vue";
    const baseimgurl = inject("$baseimgurl");
const state = reactive({
  baseimgurl: baseimgurl
});
const emit = defineEmits(['gorenpage'])
const textvalue = ref('');
const userId = ref('');
const userinfo = ref({});
const mashow = ref(false);
const qrcodeSrc=ref('')
const maopen = () => {
  mashow.value = true;

  userinfo.value = JSON.parse(uni.getStorageSync("userinfo"));
userId.value=JSON.parse(uni.getStorageSync("userinfo")).id
console.log(userId.value)
  textvalue.value=(Number(userId.value) + 187423) + '_rmker_sheshouduo.com'
  console.log(111, textvalue.value)

};
const maclose = () => {
  mashow.value = false;
};
const gorenpage=()=>{
  emit('gorenpage', '1')
}

defineExpose({
  maopen,   
  gorenpage
});
</script>
<style lang="scss" scoped>
  .fabox{
    position: relative;
    height: 300rpx;
    margin-bottom: 200rpx;
    display: flex;
    align-items: center;
  }
    .mabox {
  border-radius: 50rpx;
  width: 614rpx;
  height: 816rpx;
  background: url("http://f.sheshouduo.cn/x/s1/gerenmabg.png")
    no-repeat;
  background-size: 100% 100%;
  padding: 38rpx 56rpx;
  box-sizing: border-box;
  .maimg {
    width: 243rpx;
    height: 243rpx;
    margin: 108rpx 130rpx;
  }
  .nametext {
    font-size: 40rpx;
    color: #000000;
  }
  .phonetext {
    font-size: 25rpx;
    color: #666666;
  }
  .shelogo{
    width: 94rpx;
    height: 116rpx;
    margin-right: 26rpx;
  }
  .tips{
    font-size: 22rpx;
font-weight: 400;
color: #333333;
line-height: 32rpx;
  }
}
.nomabox{
  text-align: center;
  width: 613rpx;
  height: 816rpx;
  background: linear-gradient(180deg, #E0C3FC 0%, #fff3fc 100%);
.rentiplogo{
  width: 358rpx;
  height: 176rpx;
  margin-top: 86rpx;
  margin-bottom: 176rpx;
}
.tips{
  font-size: 33rpx;
font-weight: 600;
color: #000000;
margin-bottom: 20rpx;
}
.goren{
width: 526rpx;
height: 94rpx;
line-height: 94rpx;
background: #953B82;
border-radius: 7rpx;
font-size: 27rpx;
font-weight: 500;
color: #FFFFFF;
margin-top: 130rpx;
}
}
/* #ifdef MP-WEIXIN */
.erweimabox{
  width: 243rpx;
  height: 243rpx;
  margin: 0rpx auto;
  margin-top: 80rpx;
}
/*  #endif */
</style>